<template>
    <div class='mock_box'>
        <div class="mock_mid">
            <div class="mock_title">
                <span>新建跟进</span>
                <span @click="props.handleOk" style=" cursor: pointer;"><el-icon>
                        <Close />
                    </el-icon></span>
            </div>
            <a-form :model="formState" name="basic" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <a-form-item label="客户名称:" :rules="[{ required: true, message: '请选择你的客户名称' }]" name="listNameOne">
                    <a-select v-model:value="formState.listNameOne">
                        <a-select-option :value="item" v-for="(item, index) in listName" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="客户状态:" :rules="[{ required: true, message: '请选择你的订单标题' }]" name="listTitleOne">
                    <a-select v-model:value="formState.listTitleOne">
                        <a-select-option :value="item" v-for="(item, index) in listTitle" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="联系人:" :rules="[{ required: true, message: '请输入你的联系人' }]" name="listNumall">
                    <a-input style="width: 100%;" v-model:value="formState.lmxi" />
                </a-form-item>

                <a-form-item label="提醒谁看:" name="listDate">
                    <!-- <a-date-picker style="width: 100%;" v-model:value="listDate"/> -->
                    <a-input style="width: 100%;" v-model:value="formState.tixk" />
                </a-form-item>

                <p style="text-align: left; height: 50px; line-height: 50px; margin-left: 15px; font-weight: bold;">
                    提醒谁看</p>
                <a-form-item label="跟进时间:"  name="listDateFirst">
                    <a-date-picker style="width: 100%;" v-model:value="formState.listDate" />
                </a-form-item>
                <a-form-item label="跟进人员:" name="listNumall">
                    <a-input style="width: 100%;" v-model:value="formState.phone"  />
                </a-form-item>
                <a-form-item label="跟进提醒:" name="listNumall">
                    <a-input style="width: 100%;" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onFinish" >保存</a-button>
                    <a-button style="margin-left: 10px"  @click="onFinishFailed" >取消</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
// import { getfollowUp } from '@/store/ticket'

onMounted(() => {
    disableScroll()
    findCustom()
})
let props = defineProps(['open', 'handleOk', "data"])
// 禁止页面滚动
function disableScroll() {
    // 获取当前滚动位置
    var x = window.scrollX;
    var y = window.scrollY;
    // 禁止滚动
    window.onscroll = function () {
        window.scrollTo(x, y);
    };
}



// 获取数据

// 获取客户名称列表
let listName = ref<any[]>([])
let listTitle = ref<any[]>([])
// 查找客户名称
const findCustom = () => {
    props.data.forEach(async (item: any) => {
        if (!listName.value?.includes(item.corpName)) {
            listName.value.push(item.corpName)
        }
    })
    props.data.forEach(async (item: any) => {
        if (!listTitle.value?.includes(item.corpState)) {
            listTitle.value.push(item.corpState)
        }
    })
}

const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };
const checked = ref(false);




interface FormState {
    listNameOne: string;
    listTitleOne: string;
    lmxi:string;
    tixk:Array<T>;
    listDate: string;
    phone:string;
    // listNumall: Number;
    // listDateFirst: any;
    // remember: boolean;
}

const formState = reactive<FormState>({
    listNameOne: '',
    listTitleOne: '',
    lmxi:'李小红',
    tixk:['颜如玉','奈何','赵小刚'],
    listDate: '',
    phone:'赵小刚'
    // listNumall: 0,
    // listDateFirst: '',
    // remember: true,
});
const onFinish = (values: any) => {
    console.log('Success:', values);
    // console.log(formState, 'formState');
    // getfollowUp(formState)

};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    formState.listNameOne = ''
    formState.listTitleOne = ''
    formState.lmxi = ''
    formState.tixk = []
    formState.listDate = ''
    formState.phone = ''
    props.handleOk
};


</script>

<style scoped lang="less">
.mock_box {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;

    .mock_mid {
        background-color: #fff;
        width: 550px;
        height: 400px;
        overflow: auto;
        box-sizing: border-box;

        .mock_title {
            height: 50px;
            padding: 0 15px;
            box-sizing: border-box;
            background-color: rgb(242, 242, 242);
            display: flex;
            justify-content: space-between;
            align-items: center;
            top: 0;
            z-index: 5;
            margin-bottom: 25px;
            position: sticky;
            color: black;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 水平偏移量为0, 垂直偏移量为4px, 模糊半径为6px, 阴影颜色为淡灰色 */
        }
    }
}
</style>